<template>
    <div id="dashboard">
        <div>
            <div style="background:blue;width:4rem;height:2rem;float:left;margin-right:0.1rem;margin-left:0.5rem;margin-top:0.2rem;">
                <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">系统会员数</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{memberNum}}<span style="font-size:0.1rem">个</span></div>
            </div>
             <div style="background:red;width:4rem;height:2rem;float:left;margin-right:0.1rem;margin-left:0.5rem;margin-top:0.2rem;">
                <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">采购订单数</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{caigousNum}}<span style="font-size:0.1rem">单</span></div>
             </div>
             <div style="background:#98a7b5;width:4rem;height:2rem;float:left;margin-right:0.5rem;margin-left:0.5rem;margin-top:0.2rem;">
               <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">待支付</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{dzfNum}}<span style="font-size:0.1rem">单</span></div>
             </div>
        </div>
        <div>
            <div style="background:#b7d47a;width:4rem;height:2rem;float:left;margin-right:0.1rem;margin-left:0.5rem;margin-top:0.2rem;">
                <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">待发货</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{dfhNum}}<span style="font-size:0.1rem">单</span></div>
            </div>
             <div style="background:#caca38;width:4rem;height:2rem;float:left;margin-right:0.1rem;margin-left:0.5rem;margin-top:0.2rem;">
               <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">已发货</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{yfhNum}}<span style="font-size:0.1rem">单</span></div>
             </div>
             <div style="background:#d6af80;width:4rem;height:2rem;float:left;margin-right:0.5rem;margin-left:0.5rem;margin-top:0.2rem;">
                 <div  style="color:white;font-size:0.01rem;margin-top:0.1rem;margin-left:0.1rem;">已完成</div>
                <div style="color:white;font-family:STHeiti;font-size:0.7rem;margin-left:1rem;">{{ywcNum}}<span style="font-size:0.1rem">单</span></div>
             </div>
        </div>
    </div>
</template>
<script>
    import { getNums } from './../../../service/api/index.js'
     export default{
       name:"Dashboard",
            data() {
              return {
                  memberNum:'',
                  caigousNum:'',
                  dzfNum:'',
                  dfhNum:'',
                  yfhNum:'',
                  ywcNum:'',
              }
            },
            
           
            
          
   
            mounted(){
              
            },

            created(){

                 //请求网络数据   调用getVegetables返回promise对象，然后可以调用promise的then方法，返回请求到的数据(response.data)  
                      getNums().then((response)=>{
                      console.log(response);
                      if (response.success) {
                            this.memberNum = response.membersNum;
                            this.caigousNum = response.caigousNum;
                            this.dzfNum = response.dzfNum;
                            this.dfhNum = response.dfhNum;
                            this.yfhNum = response.yfhNum;
                            this.ywcNum = response.ywcNum;
                       }
                 }).catch(error=>{
                       // todo......
                      console.log(error);
                 })   //---catch
            }, // ----created

            methods:{
            
            }
     }
    
</script>
<style lang="less" scope>
   #dashboard{

     width:100%;
     height:100%;
     background-color:#f5f5f5;
   }
</style>